#{extends 'main.html' /}
#{set title:'xtabs' /}

<script type="text/javascript" src="/public/xplugin/jquery.xdbg.js"></script>
<script type="text/javascript" src="/public/xplugin/jquery.xurls.js"></script>
<script type="text/javascript" src="/public/xplugin/jquery.xtabs.js"></script>

<div id="xtabs">
	<div id="xtab-controller">
		<div id="worktab" href="">Work</div>
		<div id="lifetab" href="">Life</div>
		<div id="foodtab" href="">Food</div>
		<div id="playtab" href="">Play</div>
	</div>
	<div id="xtab-container">
		<div id="workdiv" style="display:none">
			11111111111111
		</div>
		<div id="lifediv" style="display:none">
			22222222222222
		</div>
		<div id="fooddiv" style="display:none">
			333333333333333
		</div>
		<div id="playdiv" style="display:none">
			444444444444444
		</div>
	</div>
</div>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$("#xtabs").xtabs({
			tabContentPairs: '{"worktab":"workdiv", "lifetab":"lifediv", "foodtab":"fooddiv", "playtab":"playdiv"}', 
			urlTabPairs: '{"work":"worktab", "life":"lifetab", "food":"foodtab", "play":"playtab"}',
			defaultTitle: "work"
		});		
	});
</script>
